I am using shopify buy button js to create and add items to the cart on my website, and it redirects the user to my shopify site on checkout.
Now, on the checkout page, I want to retrieve information about the cart and its lineitems inside checkout.liquid but the cart is always empty when I tried by calling /cart.js and also Shopify.getCart() with their jquery wrapper.
Below are what I have tried:
Inside checkout.liquid
Attempt 1:
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
$(function() {
console.log(Shopify.getCart());
});
</script>
Attempt 2:
<script type = "text/javascript" >
$(function() {
$.getJSON('/cart.js', function(cart) {
console.log(cart);
});
});
</script>
Any ideas on how to get those information? Thanks
It appears that there is no direct way to retrieve these values on the client side. I ended up rendering the data on server side and parse them using jQuery instead.
<div class="data" style="display:none;">
<span class="taxAmount">{{ checkout.tax_price | money_without_currency | remove: ',' }}</span>
<span class="grandTotal">{{ checkout.total_price | money_without_currency | remove: ',' }}</span>
<span class="currency">{{ shop.currency }}</span>
{% for line_item in checkout.line_items %}
<div class="lineItem">
<span class="name">{{ line_item.product.title }}</span>
<span class="sku">{{ line_item.sku }}</span>
<span class="quantity">{{ line_item.quantity }}</span>
<span class="unitPrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
<span class="salePrice">{{ line_item.price | money_without_currency | remove: ',' }}</span>
<span class="totalPrice">{{ line_item.price | times: line_item.quantity | money_without_currency | remove: ',' }}</span>
<span class="imageUrl">{{ line_item.image | image_url }}</span>
</div>
{% endfor %}
</div>
<script type="text/javascript">
$(function() {
$('.data .lineItem').each(function() {
"sku": $(this).find('.sku').text(),
"name": $(this).find('.name').text()
// do my stuff
});
});
Related
I am working on a Shopify website, what I have done is, show all the variants of a product as the individual product on the collection page, but what I want help with is, when someone click on the variant image on the collection page, it should open the same variant in the product page
<div class="col-6 col-md-4 custom-variant" data-tag="{{test}}">
<div class="hover-grid-wrapper">
<a href="{{product.url}}">
{%if variant.image.src != blank %}
<img src="{{ variant.image.src | img_url: 'master' }}" alt="" class="img-responsive" />
{% else %}
<div class="product-image pr oh lazyload" data-include="{{pr_url}}/?view=img{{sett_equal}}"><div class="nt_bg_lz nt_fk_lz"{% unless sett_equal %} style="padding-top:{{ 1 | divided_by: images_0.aspect_ratio | times: 100}}%;"{% endunless %}></div></div>
<img src="{{ product.featured_image.src | crop:center | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
{% endif %}
{% assign vTitle = variant.title | split: ' / ' %}
{% assign title = words[0] | capitalize %}
<span class="color-text color-{{color | handle }} {{variant.id}}">{{title}}</span>
</a>
{%- if variant.inventory_quantity <= 0 and variant.inventory_management == 'shopify' -%}{%- assign txt = 'products.product.pre_orders' | t -%}{%- else -%}{%- assign txt = 'products.product.add_to_cart' | t -%}{%- endif -%}
<span>+ Quick Add</span>
</div>
</div>
This is my code
Easy :)
You should use variant deep link
On the link of the product, you should add ?variant=[variant-id]
On your code replace:
<a href="{{product.url}}">
by
<a href="{{ product.url }}?variant={{ variant.id }}">
I want to edit the "Buy now" button on my Shopify page, to redirect to another URL that tells them that the product is not available at the moment, but thanking them instead for their interest in buying it. When i go through the source code files, this is the code i see for the Product page which has the button.
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}
{% section 'product-template' %}
{% if collection %}
<div class="full-width full-width--return-link">
<a href="{{ collection.url }}" class="h1 return-link">
{% include 'icon-arrow-thin-left' %}
{{ 'products.product.collection_return' | t: collection: collection.title }}
</a>
</div>
{% endif %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>
You can change shopify theme content please follow these steps
go to Online Store > Action > Edit Language > Product change content you want to change
I have a simple list defined in angular:
defaultPointer.list=[
{name:'Scott',age:29,img:'http://localhost/learn/angular/img/1.jpg'},
{name:'Steve',age:19,img:'http://localhost/learn/angular/img/2.jpg'},
{name:'Ben',age:39,img:'http://localhost/learn/angular/img/3.jpg'},
{name:'Penny',age:12,img:'http://localhost/learn/angular/img/4.jpg'}
];
Following is the HTML:
<li ng-repeat="x in defaultPointer.list | filter:defaultPointer.search">
<img ng-src="{{ x.img }}"/> <span>{{x.name | uppercase}} is {{ x.age }}</span>
</li>
For some reason, it's showing empty space and no errors in console. What could be the problem?
Please use my code and check it:
defaultPointer.list=[
{name:'Scott',age:29,img:'img/1.jpg'},
{name:'Steve',age:19,img:'img/2.jpg'},
{name:'Ben',age:39,img:'img/3.jpg'},
{name:'Penny',age:12,img:'img/4.jpg'}
];
Following is the HTML:
<li ng-repeat="x in defaultPointer.list | filter:defaultPointer.search">
<img ng-src="{{ x.img }}"/> <span>{{x.name | uppercase}} is {{ x.age }}</span>
</li>
You have to place this html file in angular folder.
Hi I am currently tracking users who add item to their cart and then view their cart summary page. I have inserted the following code in my cart.liquid file;
<!-- Begin Mixpanel integration code -->
<script type="text/javascript">
mixpanel.track("Checkout",
{ "Checkout Total": "{{ product.price | money }}" });
</script>
<!-- End Mixpanel integration code -->
The event 'Checkout' is coming through fine on my mixpanel dashboard however i am unable to get the property of { product.price | money } to come through. Is there are a reason why 'checkout total' comes up blank? How do i get shopify to send to mixpanel the price of the item added to cart?
I am trying to track the price of the product which is located in the product.liquid file:
<p>
{% if product.variants.size > 1 %}
<span class="actual-price" itemprop="price">{{ product.price | money }}</span> <span class="compare-price"></span>
{% else %}
<span class="actual-price" itemprop="price">{{ product.price | money }}</span>{% if product.compare_at_price > product.price %}
<span class="compare-price">Was {{ product.compare_at_price_max | money }}</span>{% endif %}
{% endif %}
</p>
Also tried with variant.price but it still didn't work;
mixpanel.track("Checkout",
{ "Checkout Total": "{{ variant.price }}" });
Thanks
Right now, I have a bunch of filters that use ng-click to filter some JSON data pulled in from a factory:
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li>Apple</li>
<li>Samsung</li>
<li>HTC</li>
</ul>
<div ng-controller="phonesController">
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
It works well, but I'm wondering how I can programmatically generate the links and use ng-click to filter. My best attempt so far:
<div ng-controller="phonesController">
<ul class="brands">
<li><a href="#" ng-click="brandFilter = null">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">{{ phones.manufacturer }}</li>
</ul>
<div class="phonesContent">
<article ng-repeat="phones in phoneData | filter:brandFilter" class="phone-article">
<img src="{{ phones.image }}" alt="{{ phones.name }}" class="phone-img">
<p>{{ phones.name }}</p>
<p>Price: ${{ phones.price }}</p>
<p>No term: ${{ phones.no-term }}</p>
</article>
</div>
</div>
The links are generating properly and the data is showing up in the phonesContent div, but the filtering is not working. I keep getting a $parse:syntax error so something is wrong with my expression where brandFilter = { 'manufacturer' = phones.manufacturer } (I think).
Rob has pointed out why your code is not working, but I would say it's best to avoid having assignment statements in your directives. That way the interface to your controler is clearly defined.
I'd suggest adding a scope function setFilter() to your controller that sets the filter value:
$scope.setFilter = function (value) {
$scope.brandFilter = value ? { manufacturer: value } : null;
};
Then you can do this:
<li><a href="#" ng-click="setFilter(null)">All</li>
<li ng-repeat="phones in phoneData | unique: 'manufacturer'">
{{ phones.manufacturer }}
</li>