Bigcartel: Is it possible to add extra dynamic fields? - bigcartel

I'm adapting the Bigcartel Luna theme for a client.
They would like to add a subtitle under the main title on the product pages. In Wordpress this would be done using custom fields. Is there a way to add new dynamic fields using Bigcartel?

Sorry, but there's not a way to add any kind of custom fields to display extra information on the product pages. You could consider modifying the Product page theme code though (through Customize Design > Advanced > Product) and adding in multiple if statements -
{% if product.name == 'This product' %}
<h2>This product</h2>
{% elsif product.name == 'That product' %}
<h2>That product</h2>
{% elsif product.name == 'The other product' %}
<h2>The other product</h2>
{% endif %}
... and so on.

Related

How to add custom view to django admin interface?

My django admin interface looks like this:
Now I would like to add a view which does not correspond to a model.
I could overwrite the template of above page and add a custom link. But I think this would look ugly.
Example for overwriting admin/index.html:
{% extends "admin/index.html" %}
{% block content %}
{{ block.super }}
<div class="app-sonstiges module">
....
</div>
{% endblock %}
But maybe there is an official way to do add a custom view to the admin interface?
In my case I want to provide a form which can execute tcptraceroute to a remote server. The admin of my app needs this.
I used the same html tags. Now the link "tcptraceroute" looks nice, but unfortunately the messages moved down:
Is there a way to get a custom part like "Sontiges ... tcptraceroute" like in the screenshot, without moving the latest actions down?
Here is how the html structure looks like. My <div class="app-sonstiges"> is below content-main:
You have 3 options here:
Using third-party packages which provide menu
This is pretty straight forward, there are some good packages out there which support menu for admin, and some way to add your item to the menu.
An example of a 3rd party package would be django-admin-tools. The drawback is that it is a bit hard to learn. Another option would be to use django-adminplus but at the time of writing this, it does not support Django 2.2.
Hacking with django admin templates
You can always extend admin templates and override the parts you want, as mentioned in #Sardorbek answer, you can copy some parts from admin template and change them the way you want.
Using custom admin site
If your views are supposed to only action on admin site, then you can extend adminsite (and maybe change the default), beside from adding links to template, you should use this method to define your admin-only views as it's easier to check for permissions this way.
Considering you already extended adminsite, now you can use the previous methods to add your link to template, or even extend get_app_list method, example:
class MyAdminSite(admin.AdminSite):
def get_app_list(self, request):
app_list = super().get_app_list(request)
app_list += [
{
"name": "My Custom App",
"app_label": "my_test_app",
# "app_url": "/admin/test_view",
"models": [
{
"name": "tcptraceroute",
"object_name": "tcptraceroute",
"admin_url": "/admin/test_view",
"view_only": True,
}
],
}
]
return app_list
You can also check if current staff user can access to module before you show them the links.
It will look like this at then end:
Problem here that your div is not inside main-content. I suggest extending admin/index.html
Put in app/templates/admin/index.html
{% extends "admin/index.html" %}
{% load i18n static %}
{% block content %}
<div id="content-main">
{% if app_list %}
{% for app in app_list %}
<div class="app-{{ app.app_label }} module">
<table>
<caption>
{{ app.name }}
</caption>
{% for model in app.models %}
<tr class="model-{{ model.object_name|lower }}">
{% if model.admin_url %}
<th scope="row">{{ model.name }}</th>
{% else %}
<th scope="row">{{ model.name }}</th>
{% endif %}
{% if model.add_url %}
<td>{% trans 'Add' %}</td>
{% else %}
<td> </td>
{% endif %}
{% if model.admin_url %}
{% if model.view_only %}
<td>{% trans 'View' %}</td>
{% else %}
<td>{% trans 'Change' %}</td>
{% endif %}
{% else %}
<td> </td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
{% endfor %}
<!-- here you could put your div -->
<div class="app-sonstiges module">
....
</div>
<!-- here you could put your div -->
{% else %}
<p>{% trans "You don't have permission to view or edit anything." %}</p>
{% endif %}
</div>
{% endblock %}
The another approach is to add custom app to app_list. But it is far more ugly. So I suggest overriding template.
I assume you are overriding get_urls in AdminSite.
If you need a custom page to handle user input (from form), you may want to give django-etc 1.3.0+ a try:
from etc.admin import CustomModelPage
class MyPage(CustomModelPage):
title = 'My custom page' # set page title
# Define some fields you want to proccess data from.
my_field = models.CharField('some title', max_length=10)
def save(self):
# Here implement data handling.
super().save()
# Register the page within Django admin.
MyPage.register()

Display a list of shop categories on Big Cartel shop landing

I'm using the Luna theme of Big Cartel.
My shop sits on /products and clicking on a shop category links to /category/tees or /category/accessories etc.
The /products page currently shows a list of all products in the store. I want to change that to show a list of categories
Is there a way to check if I'm on a category page or on the shop landing page?
I also tried the following but it doesn't seem to work
{% if page.url == '/products' %}
// Show categories grid
{% else %}
// Show category products
{% endif %}
Any help would be appeciated
Use the page.full_url variable with contains for best results:
{% if page.full_url contains '/category' %}
// Show category products
{% else %}
// Show categories grid
{% endif %}

Django - ModelForms rendered indexed by foreignKey and that value POSTed

A simple and logical extension of the tutorial polls app would be showing several questions per page with a single 'submit' button. I've got a hybrid design that uses ModelForms for multi-field questions but individually rendered fields for single-field questions. So the standard question_set page is rendered by:
{% load custom_tags %}
{% block question_set %}
<form action="{% url 'polls:answer' user.username %}" method="POST">
{% csrf_token %}
{% for question in page_question_list %}
<hr/>
{% if question.answer_type == "CH" %}
{% include "polls/Choice_Answer_form.html" %} {%endif%}
{% if question.answer_type == "SA" %}
{% include "polls/Short_Answer_form.html" %} {%endif%}
{% if question.answer_type == "LA" %}
{% include "polls/Long_Answer_form.html" %} {%endif%}
{% if question.answer_type == "E3" %}
{% include "polls/EJ_Answer_form.html" with form=forms|get_item:question%}
{%endif%}
{% if question.answer_type == "E4" %}
{% include "polls/EJ_Answer_form.html" with form=forms|get_item:question%}
{%endif%}
{% if question.answer_type == "BS" %}
{% include "polls/brainstorm_form.html" %}
{% endif %}
{% endfor %}
<br/>
<hr/>
<input type="submit" value="Submit" />
</form>
{% endblock %}
I have a sense that I have missed something fundamental about how forms are supposed to work. When you create a ModelForm object and send it out to be rendered, it knows what instance (in my case, question number and user_id) it corresponds to in the model. When it comes back from the browser, that information is gone if you have disabled, read-only'd or hidden those (id, pk etc) fields. You could put that information in the url, but it will only be feasible if you are dealing with a single row of data on each page. In the docs are [examples][1] cheerfully showing how to ModelForm(request=request, instance=instance) but I don't know how to design it so that the request and the instance stay in sync.
Some strategies I've looked into:
bundle needed forms in formsets and use the 'prefix' to differentiate them. Not sure that the question number association can be retained for rendering (suspect it can) or recovered if it is still dropped from the POST data (suspect it can't).
modifying the rendered field-names to include the Key information (question number, user) to prevent them overlapping in html namespace and only the last values being submitted e.g. generate a new field for the form with the data in it to be rendered and presumably passed back or define a function to set a html_field_name in the constructor.
use the form 'auto_id' (see docs) string to give every field a unique name that encodes question number - suspect this ought to be redundant and better handled by the pros in a formset, but see my first idea.
I probably want to try the easiest and best first; any advice gratefully received.
(I had a bunch more links but am not allowed to post them with so little status)
I found that loading and retrieving the question number from the 'prefix' (but not auto_id) field as a string "qNN#" for each form can work (because the prefix is applied to the element name and auto_id applies to the id, and its the name that the POST data uses). I've put all this logic in 'views.py'
The view that catches the submitted form has to look at the keys in request.POST and when it finds a key beginning with q, it works out what question the fields come from and passes the request off with the question to create the form from the request + prefix.
This means that request.POST is sent to my form_instantiator helper function each time there is form_data to be found, rather than submitting them as a group to be iterated over.
I feel guilty of cruelty to Django, somehow.

How to check if current visitor is shop's admin?

I would like to create a product that will be available in Shopify's storefront but only accessible for the shop administrator. Is there a way to identify if the current user is an admin via liquid? Or is there any other solution for this. Thanks!
If you're signed in as an admin, when rendering the {{ content_for_header }} include, it will contain some JavaScript to push the page content down to make room for the Shopify admin bar.
We can utilize capture to store the {{ content_for_header }} code as a liquid variable and then use the contains operator to check if admin_bar_iframe exists in the variable.
{% capture CFH %}{{ content_for_header }}{% endcapture %}{{ CFH }}
{% if CFH contains 'admin_bar_iframe' %}
{% assign admin = true %}
{% endif %}
{% if admin %}
<!-- User is an admin -->
{% else %}
<!-- User is not an admin -->
{% endif %}
Note: I've noticed that the Shopify admin bar doesn't populate at all times (I think its a bug). If your Shopify admin bar is not populating on your instance this will not work.
Just figured out this method that works. (Basically the same thing as the old method, just another way around!)
Detecting logged in admin viewing site:
{% if content_for_header contains 'adminBarInjector' %}
<script>
console.log("You're a logged in admin viewing the site!");
</script>
{% endif %}
Detecting admin in design mode:
{% if content_for_header contains 'designMode' %}
<script>
console.log("You're an admin in design mode!");
</script>
{% endif %}
Another approach would be to use Customer Accounts. Liquid provides a {{ customer }} object, which is only present when a user (customer) is logged in.
You can add a specific tag to an admin user and use liquid to verify if a tag is present:
{% if customer.tags contains "admin" %}
And of course you need to identify your product as 'admin-only', for example using tags:
{% if customer.tags contains "admin" and product.tags contains "admin" %}
<!-- render product -->
{% else %}
<!-- do nothing -->
{% endif %}
EDIT: This seems not to be working anymore since an update to Shopify.
I know this is late, but here is what I've used and it has worked correctly in my testing. This is adapted from the previous answers, but allows use for Customise Theme options, etc.
{% capture CFH %}{{ content_for_header }}{% endcapture %}{{ CFH }}
{% assign isAdmin = true %}
{% if CFH contains '"__st"' %}
{% if CFH contains 'admin_bar_iframe' %}{% else %}
{% assign isAdmin = false %}
{% endif %}
{% endif %}
This is a more complete version of that provided by kyle.stearns above (I can't comment on it because new). One of the main instances where admin bar doesn't load is when previewing themes. Here is the amended code which I've used (updated June 2018 - as Shopify edited the way we preview themes):
{% capture CFH %}{{ content_for_header }}{% endcapture %}
{% if CFH contains 'admin_bar_iframe' %}
{% assign admin = true %}
{% elsif CFH contains 'preview_bar_injector-' %}
{% assign admin = true %}
{% endif %}
{% if admin %}
<!-- User is an admin -->
<script>
alert ("do some work");
</script>
{% else %}
<!-- User is not an admin -->
<script>
alert ("please buy some stuff");
</script>
{% endif %}
If you're using Plus then you also have access to the User via api.
I know this is an old question, but it still shows on top in google searches.
There's now a much better way.
Using liquid:
{% if request.design_mode %}
<!-- This will only render in the theme editor -->
{% endif %}
Using javascript:
if (Shopify.designMode) {
// This will only render in the theme editor
}
Source: shopify.dev
Currently there isn't. You could perhaps try inspecting cookies and stuff to see if there's some identifying information that would let you know if the user is an admin, but it would be fragile.
This would also require rendering the items, but hiding them via CSS. Then you'd show them using JS after you've run your checks.
As stated, this would probably be really fragile.

How to render individual radio button choices in Django?

If I have a model that contains a ChoiceField with a RadioSelect widget, how can I render the radio buttons separately in a template?
Let's say I'm building a web app that allows new employees at a company to choose what kind of computer they want on their desktop. This is the relevant model:
class ComputerOrder(forms.Form):
name = forms.CharField(max_length=50)
office_address = forms.Charfield(max_length=75)
pc_type = forms.ChoiceField(widget=RadioSelect(), choices=[(1, 'Mac'), (2, 'PC')])
On the template, how do I render just the Mac choice button? If I do this, it renders all the choices:
{{ form.pc_type }}
Somewhat naively I tried this, but it produced no output:
{{ form.pc_type.0 }}
(I found a few similar questions here on SO:
In a Django form, how do I render a radio button so that the choices are separated on the page?
Django Forms: How to iterate over a Choices of a field in Django form
But I didn't feel like they had good answers. Is there a way to resurrect old questions?)
Django 1.4+ allows you to iterate over the choices in a RadioSelect, along with the lines of
{% for choice in form.pc_type %}
{{ choice.choice_label }}
<span class="radio">{{ choice.tag }}</span>
{% endfor %}
I'm not sure if this change allows you to use the syntax you describe ({{ form.pc_type.0 }}) — if not, you could work around this limitation with the for loop above and a tag like {% if forloop.counter0 == 0 %}.
If you're tied to Django < 1.4, you can either override the render() method as suggested or go with the slightly-more-verbose-but-less-complicated option of building up the form field yourself in the template:
{% for choice in form.pc_type.field.choices %}
<input name='{{ form.pc_type.name }}'
id='{{ form.pc_type.auto_id }}_{{ forloop.counter0 }}' type='radio' value='{{ choice.0 }}'
{% if not form.is_bound %}{% ifequal form.pc_type.field.initial choice.0 %} checked='checked' {% endifequal %}
{% else %}{% ifequal form.pc_type.data choice.0 %} checked='checked' {% endifequal %}{% endif %}/>
<label for='{{ form.pc_type.auto_id }}_{{ forloop.counter0 }}'>{{ choice.1 }}</label>
{% endfor %}
(choice.0 and choice.1 are the first and second items in your choices two-tuple)
The rendering of the individual radio inputs is handled by the RadioSelect widget's render method. If you want a different rendering, subclass RadioSelect, change the render method accordingly, and then use your subclass as the field's widget.
I think the simply looking at what's available inside the for loop of a choice field will tell one what they need to know. For example, I needed the value to set a class surrounding the span of the option (for colors and such):
<div>
{% for radio_input in form.role %}
{# Skip the empty value #}
{% if radio_input.choice_value %}
<span class="user-level {{ radio_input.choice_value }}">{{ radio_input }}</span>
{% endif %}
{% endfor %}
</div>
There are several attributes as you can see that keep you from having to use the ordinal.
In Django 2.0+ you can subclass forms.RadioSelect and "simply" specify a template for rendering the radio fields:
class SlimRadioSelect(forms.RadioSelect):
template_name = 'includes/slim_radio.html'
where slim_radio.html contains a revised version of the combined template_name and option_template_name used by the default RadioSelect widget.
Note, the default RadioSelect widget template is low-level rendering and consists of heavily layered templates: include, conditional and loop logic tags abound.
You'll know you've arrived when you're digging around in packages/django/forms/templates/django/forms/widgets/input.html to get what you need.
One other oddity for overriding the default widget's template is that you must invoke the TemplatesSetting renderer or your subclass won't be able to find slim_radio.html in your project's normally accessible template paths.
To override RadioSelect's local-only template path lookup:
Add 'django.forms' to your INSTALLED_APPS;
Add FORM_RENDERER = 'django.forms.renderers.TemplatesSetting' to your settings.py.
This all seems harder than it should be, but that's frameworks. Good luck.