Shopify - detecting metafields - html

Very new to Shopify and wondered if anyone could help me. I've some products listed that when clicked should provide a link to an affiliate as opposed to the add to cart button. To create the affiliate option I used Metafield Solid to add the affiliate link data:
Key:url
Namespace: affiliate
In the themes (Minimal) I made the following changes:
<!-- Affiliate metafield contains? {{ product.metafields.affiliate.url }} -->
<div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
<div class="purchase">
{% if product.metafields.affiliate.url %}
<a target="_blank" href="{{ product.metafields.affiliate.url }}" />Buy from Affiliate</a>
{% else %}
<!-- this would be your original button -->
<input type="submit" id="add-to-cart" class="btn" name="add" value="{{ 'products.general.add_html' | t | escape }}" />
{% endif %}
When I preview the page it still shows the Add to cart button, yet when I view the source the comment containing product.metafields.affiliates.url clearly shows the correct affiliate URL. Is there something obvious I'm missing?

Related

Liquid Syntax Error: Expected id but found String, Custom Image Button [Shopify]

I'm a beginner Shopify developer currently learning HTML/CSS/Liquid. Right now I'm trying to replace the 'Add to Cart' button with a custom .png image, making it clickable and functional.
In the product-template.liquid file, I found this block of code which I believe is the add to cart button:
<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_bag' | t }}</span>
I uploaded the .png file I want to use to the Assets folder and located the asset url. I then found this block of code in a forum and changed it to match the existing button's id, type, name, etc.
<input src="{{ "ROLL_OVER_CTA_BUTTON.png" | "//cdn.shopify.com/s/files/1/0557/3304/9749/t/2/assets/ROLL_OVER_CTA_BUTTON.png?232" }} type="submit" name="add" id="AddToBag" class="btn"/>
When attempting to save the file, I keep getting an error that Liquid expected id but found string in the line with the .png file name and asset url. Is there something I can change/add to this code to get rid of the error and successfully create the custom image button or am I starting in the completely wrong direction?
Any help is much appreciated in advance!
to get the URL from asset, use 'file_name.png' | asset_url
put image to the button
{% assign imgUrl = 'ROLL_OVER_CTA_BUTTON.png' | asset_url %}
<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}">
<img src="{{imgUrl}}" alt="" class="" loading="lazy" width="" height="">
</button>

I cannot go to the page I want

Hello I have a post blog where I have a homepage with posts and if you click on it you are redirected to the post_detail page. Now I want the users to allow to delete their comments which I achieved but I want them to stay on the same post_detail page. I could not come over it and hope that someone can help me. Thanks in advance.
post_detail.html
<div class="container">
<br>
<h1 style="text-align:center;">{{post.post}} </h1>
<p style="font-size:small;text-align:center;">{{post.created_on}}</p>
<button type="button" class="btn btn-secondary float-right" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Yorum At</button>
<br>
<br>
<br>
{% for i in commentmodel_list%}
<h4 >{{i.comment}}</h4>
{% if i.author_security == user%}
<a style="float:right;color:red;"href="{% url 'forum:delete' slug=post.slug comment_id=i.id %}"><i class="fas fa-minus-circle"></i></a>
{% endif %}
{% if i.author is none %}
<p style="font-size:small;">Anonim | {{i.created_on}}</p>
{% else%}
<p style="font-size:small;"><a style="text-decoration:none;" href="#">#{{i.author}}</a> | {{i.created_on}}</p>
{% endif %}
<hr>
<br>
{% endfor %}
</div>
urls.py
app_name='forum'
urlpatterns=[
path('', views.PostList.as_view(), name='post'),
path('<slug:slug>/', views.PostDetail.as_view(), name='post_detail'),
path('delete/<slug:slug>/<comment_id>/',views.delete_post,name='delete')
]
views.py
def delete_post(request,slug=None,comment_id=None):
comment_delete=Comment.objects.get(id=comment_id)
comment_delete.delete()
post = Post.objects.get(slug=slug)
return redirect('forum:post_detail', slug= post)
I would highly recommend to delete the comments via submitting a POST request with CSRF token, otherwise it's prone to CSRF attack. When you'll be submitting the form, you can add there an input with a value representing the current page which you'll redirect to afterwards. Pseudocode:
<form action="{% url 'forum:delete' slug=post.slug comment_id=i.id %}"
method="POST">
{% csrf_token %}
<input type="hidden" name="current_post" value="{{ post.slug }}">
<input type="submit>
</form>
view:
def delete_post(request, comment_id=None):
Comment.objects.filter(id=comment_id).delete()
return redirect('forum:post_detail', slug= request.POST['current_post'])
It's not obvious if by "I want them to stay on the same post_detail page" you mean that you dont want to perform the redirect in browser and you'd rather delete it via ajax. If that's the case, please check the Django documentation about AJAX request with CSRF, as there's an example how to do exactly that.

Get current brick ID in twig template?

Currently I am creating custom bricks - sample:
{% set store = [] %}
{% for i in 1..20 %}
{% set store = store|merge([(i*8) ~ "px"]) %}
{% endfor %}
{% set heightSel = pimcore_select('heightSel', {
store: store,
reload: true,
width: 100
}) %}
{% if editmode %}
<div class="container editprop-container no-material">
<div class="ed-col ed-col-100">
<label>{{ "Height"|trans }}</label><br/>
{{ heightSel|raw }}
</div>
</div>
{% endif %}
<div class="spacer spacer-{{ heightSel.getData()|default("0px") }}"></div>
Because I want to put the editing options (.editprop-container) into a custom modal I need some unique ID for this brick (such that it does not conflict with other bricks). Is there some possiblity to the the brick ID?
Note: A twig extension would be valid solution, but this does not help me because I do not know how to retrieve some custom ID of an editable anyway.
After experimenting for some time I have solved it by adding randomly generated secondary IDs to the bricks:
{% set modalTempId = getRandomAlnumString(20) %}
<span class="edit-modal-opener" data-toggle="modal" data-target="#emo_{{ modalTempId }}"><i class="fal fa-cogs"></i></span>
<!-- Modal -->
<div class="modal fade" id="emo_{{ modalTempId }}" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
Still a better answer would be how to get the brick ID, this is a workaround which fulfills the purpose though.

Add Avatar image to only one page with pelican-bootstrap3

Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}

How to add an input field for an add to cart button?

I am trying to build an ecommerce site on bigcartel. The product page does not have a quantity field and I would like to add one. There is limited backend access but I can modify the html and add javascript.
Without too much trouble, is there any way to add a quantity field linked to the cart button?
Here is the code from the cart button area:
<div id="variations">
{% if product.available? %}
<p>
<select id="cart_variation_id">
<option>Select Option...</option>
{% for variation in product.variations %}
{% if variation.available? %}
<option value="{{ variation.id }}">{{ variation.name }} - {{ variation.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variation.name }} - {{ variation.price | money }} (Out of Stock)</option>
{% endif %}
{% endfor %}
</select>
<button class="btn" onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value);return false;">Add to Cart</button>
You can add your own button which is linked to a html <input> field called quantity, and use javascript to call Store.cart.add... quantity number of times. You will have to add extra JS to allow only numbers in input.
Looks like currently its adding to cart with onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value)
So if you wanted to add a quantity feature a 'ghetto' fix would be to have a for loop call this method quantity number of times, assuming it updates your cart quantity.