why additional script not working in shopify? - javascript

I want to add some additional content under shipping method on Shopify checkout page.
same like this.
My ref Site
https://www.thegldshop.com
enter image description here
For this, I found this article and added this script
https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/show-content-based-on-shipping-method
{% if checkout.shipping_method.title != 'Pick-up at the store' %}
Shopify.Checkout.OrderStatus.addContentBox(
`<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
)
{% endif %}
But still not working for me.
Here is my website url
https://hypeyourbeast.com/

In Shopify, You will need Shopify plus account to do any change on the checkout page. Without a Shopify Plus account, you can't change anything on the checkout page.

You can modify the Thank You / Orders page in checkout without Shopify Plus. Plus is required to edit checkout for any step prior to "thank you".
Add tags around your code in the additional scripts area. This code worked for me:
<script>
// DEBUG {{ checkout.shipping_method.title }} has been used
{% if checkout.shipping_method.title != 'Pick-up at the store' %}
Shopify.Checkout.OrderStatus.addContentBox(
`<p>Added content box {{ checkout.shipping_method.title }}</p>`
)
{% endif %}
</script>

Related

Any way to redirect a customer to a link based on a keyword in a checked out product title?

I need to be able to redirect a customer who buys a certain product to a form for more detailed data collection. Not too experienced with programming but I currently have this in my additional scripts section.
I have searched through all this documentation but have no idea how to implement it. https://help.shopify.com/en/themes/liquid/objects/checkout
Currently have this for the keyword autocheckout:
{% if line.product.handle.includes('**autocheckout**') %}
<script> window.location ="https://docs.google.com"; </script>
{% break %}
{% endif %}
{% endfor %}
I expected this to redirect but it doesn't work.
You are close, just need to specify .href,
you currently have
<script> window.location = "https://docs.google.com"; </script>
just make it this to make it work, it simulates a mouse click
<script> window.location.href = "https://docs.google.com"; </script>
furthermore you can experiment and try this one out too, it simulates a HTTP redirect
<script> window.location.replace = "https://docs.google.com"; </script>

Shopify - Variant quantity in my cart liquid cart.js

I've been spending hours to try to figure it out + forum, so next step is to post my problem! :)
So what I want to do is to display a message to my user in my cart.js. They are allowed to order when the product is "out of stock" but I want to display a message on my cart.js saying 2/3 weeks delivery.
I tried to add that in my cart.liquid :
bkseen
<p class="cart-item__variant"> {{ line_item.variant.inventory_quantity }}</p>
{% assign lineItemVariant = line_item.variant %}
{% if lineItemVariant.inventory_management == "shopify" %}
<span class="delivery-message">
{% if lineItemVariant.inventory_quantity > 0 %}
Quick delivery
{% else %}
2-3 weeks delivery
{% endif %}
</span>
{% endif %}
I've tested the code above and the result is pretty weird.
If I put the quantity in my table between <td></td>, that automatically format every values as the last one. I guess it's because of Rivet.js mixing data on the back.
And if I put the code out of <td> tags it works perfectly.. the thing is, I want to display it for each line, that's the point !
Check the result by a screenshot :
HERE
If you have any question do not hesistate.
Cheers
bkseen

Dynamic content instead of constant reloads

On our online fashion store http://www.showstyle.lu I am the webmaster trying to improve the user experience perspective. I finally managed to use a toggle tool for our filters (click on any category: e.g. Homme) as you can see if you click on Couleurs/Tailles etc all the filters appear (they used to be displayed permanently which didn't look aesthethic).
Now, the issue is upon selection of filters the page is then reloaded with a new url to filter the products. Each time the filters then toggle back up of course and it's redundant to have to reclick each one and see what filter's one chose.
Is there a way I can either make the center content container refresh like php where the rest of the site remains static? Or otherwise can I at least force the toggle to remain open if the url has "%filter%*****" in it ?
We are using a ecommerce platform called SEOshop so I don't have access to every script/index page on the website but I have access to a large part.
The filters work on generation from backend so in the html code the placeholders are simply:
{% for filter in collection.filters.custom %} <a class="filtertitle" href="javascript:;">
<p>{{ filter.title }}</p>
</a>
{% for value in filter.values %}
<div class="filterbox2">
<div class="sidebar-filter-item clearfix">
<input id="filter_{{ value.id }}" type="checkbox" name="filter[]" value="{{ value.id }}" {% if value.active %} checked="checked"{% endif %} />
<label for="filter_{{ value.id }}">{{ value.title }}{% if not value.active and value.has_count %} <span>({{ value.count }})</span>{% endif %}</label>
</div>
</div>
{% endfor %}
{% endfor %}
</form>
</div>
Another topic, is it possible to have the toggle open a popup instead? Something to look like this: https://dl.dropboxusercontent.com/u/5636466/showstyle/mockup_filters.png
Thanks for any help, I will continue my research and post my attempts/anything I find :)
If you want to reload only a specific part of the website then there is no way to do it only with php. What you are trying to do will require ajax requests to load the data without reloading the page and javascript to determine where it should be displayed (I would recommend looking into a framework like angular for that). I don't know anything about your site backend but I'm guessing this is not a trivial change and will require you to learn about such things.

Shopify - Load 'collections/all' page on my front page

How to load http://example.myshopify.com/collections/all content
to my shopify frontpage http://example.myshopify.com/
I figured out a way that I hardcode <script>window.location.href='collections/all'</script> on index.liquid, but I'm pretty sure thats' not a clean way.
and I try to copy whole collection.liquid's code to index.liquid, but it prompt me Liquid error: Array 'collection.all.products' is not paginateable. error and no product showing the index.liquid page.
Any idea how to load collections/all on shopify's front page?
I'm using Timber Framework as people recommend to start to build a theme
inside
In the Timber framework, you could change this line in index.liquid:
{% for product in collections.frontpage.products limit:4 %}
to:
{% for product in collections.all.products %}
Depending on how many products you have, you probably still want to limit how many are displayed, or paginate the output.
E.g.
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
You include this:
{% for product in collections.all.products %}
// here you have access to each product
{% endfor %}
This will loop all of your products.
You can review http://cheat.markdunkley.com/ what product variables you have access to in that loop.

Get a whole div with a Jquery get Request. Django

On my django app I display a list of the user's facebook friend, using django-facebook.
The friends are sorted depending on there "activity" (if they are active or not).
I would like to refresh this list on my page without refreshing the whole page.
Here is my view:
class fb_friend(request)
if request.user.userprofile.facebook_id:
# Get Friends
profile = request.user.get_profile()
idle_friends = profile.get_idle_facebook_friends()
active_friends = profile.get_active_facebook_friends()
offline_friends = profile.get_inactive_facebook_friends()
friend_groups = (active_friends, idle_friends, offline_friends)
In my template:
<div>
{% for group in friend_groups %}
{% for friend in group %}
<p>{{ friend.name }} ({{ friend.online_presence }})</p>
{% endfor %}
{% endfor %}
</div>
My idea would be to put the content of my view in an other view, and then use a JQuery request with a setInterval.
But the problem is that I only know how to get one element of a page with a JQuery request.
So my question is how can I get the whole div with a JQuery get request and display it in my template?
Thank you for your help!

Categories

Resources