Shopify display total discounts on cart page (before checkout) - shopify

I'm trying to display discount codes that have been applied via the URL on the cart page in a Shopify theme prior to checkout.
Example URL would be store.com/discount/DISCOUNTCOUPON
I have verified the discount exists, and if I click on Checkout and proceed to Shopifys built in checkout process then I can see the automatic discount was in fact applied - it just will not display on the cart page. Discount type is a % that applies to entire cart.
I have tried the below snippet as per this guide: https://shopify.dev/themes/pricing-payments/discounts
I am using the Dawn theme also as per the guide. (And applying the code to a section within the cart object).
{% if cart.cart_level_discount_application.size > 0 %}
Discounts:
<ul>
{% for discount_application in cart.cart_level_discount_applications %}
<li>
{{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }}
</li>
{% endfor %}
</ul>
{% endif %}
I have also tried using some variations such as:
{{ discount.title }}
{{ discount.total_allocated_amount | money }})
Nothing seems to work to display the discount.
Anybody come across this before and have any ideas why? Also for extra clarification I am not using Shopify Plus however I cant find anywhere that this is a requirement.

There are 3 types of discounts in Shopify:
Automatic Discounts: When creating discounts in the Shopify admin dashboard, you have the option to make it automatically apply to all or certain orders/customers.
Shopify Scripts: This is a Shopify app available to Shopify Plus users. Using ruby code, you can implement more customized cart/checkout behavior.
I believe the UX seen in the screenshots from the documentation was being achieved using one of the 2 above methods.
Manual Discount Codes: When creating discounts in the Shopify admin dashboard, pick "Discount code" instead of "Automatic discount". These codes are only visible in the checkout section of the website, regardless if the store is Shopify Plus or not.
Most people just write a disclaimer in the cart page, like "Discounts will be calculated during checkout".
Adding discount codes via url generates a cookie named "discount_code", that can be displayed via JS in the cart page for a better user experience, but it only contains the name of the discount.
Other solutions include various Shopify Apps built by third parties, for example: https://apps.shopify.com/discount-coupon-field-in-cart-page.
They generally use the Shopify GraphQL Storefront API to create carts and display them, but this solution involves a lot more complexity: https://shopify.dev/api/examples/cart

A late response, but want to answer your questions and share another solution for this.
I thin your code snippet has some typos, i.e cart_level_discount_application needs an s at the end (Make sure there is no typos, and I think the snippet should work just fine, good luck)
If you want to add an discount form (like the one in checkout) in your cart, or anywhere in your store you can check out this free Shopify Discounter Web Component
Shopify Discounter Web Component supports:
Discount codes
Automatic discounts
Gift cards
Discount combinations
Multi currencies
Internalization
Style customization using css variables
Place it anywhere in your store
Hope this helps.

Related

How to call a metafield value on the checkout page in shopify

I'm trying to display the item data from the metafield on the checkout page using this code-
{{ pages.package-urls.metafields.custom.checkout_message }} on checkout.liquid file.
We are using Shopify Plus and the metafields are displaying on other templates fine.
As usual, you are falling victim to the documentation. Since you want to display a metafield, if you truly know it has a value, you have to express you want the value. I think your attempt at using the pages object is mis-guided, as checkout is not a page, but, you may be right there, and it may in fact be available in checkout. Anyway, tack on a value.
{{ pages.package-urls.metafields.custom.checkout_message.value }}
As you read your metafield out backwards though, you will see that you are breaking all kinds of rules. Specifically. A metafield resource has a value. It has a key (checkout_message), it has a namespace (custom) and it has a parent resource (metafields in Shop, or Product, or Page).
So what are you doing with package-urls and pages? Strange stuff. I think you might want to anchor this to the Shop. That will likely work a lot better.

Can I update shopify customer metafields now through theme file?

I'm wondering if there's now a way to update customer metafields from a Shopify theme. I found this question How to add a metafield to a customer in Shopify and the documentation still states to use notes.
I noticed that question was quite out of date now and also Shopify admin has editable fields now for customer metafields.
Is there a way to capture data in the registration form to populate customer metafields? Or do I have to use notes?
Below is what I tried?
<input
type="text"
name="customer[metafields][mobile]"
id="RegisterForm-mobile"
aria-required="true"
{% if form.errors contains 'mobile' %}
aria-invalid="true"
aria-describedby="RegisterForm-mobile-error"
{% endif %}
placeholder="{{ 'customer.register.mobile' | t }}"
>
<label for="RegisterForm-mobile">
{{ 'customer.register.mobile' | t }}
</label>
</div>
Short answer is yes, you can update metafields from a theme. Also a short answer, you cannot do this without using an App. Short answer as to why this is? Only an App has permissions to change data like metafields in a store (other than provided forms like the ones used to capture a customer's info such as address). These forms are not a gateway drug to metafields.
The typical approach in your only option is to set up an App with an App Proxy, allowing JS calls to be securely made with that precious data from the store. That is the best you can do. In fact, it is all you can do.

Is my Liquid syntax wrong, or am I missing a reference?

I'm new to coding, but I decided to try and dig in to liquid because my company is looking to increase our automation, and an automation App we use in Shopify (Shopify Flow) accepts liquid commands to print messages (in this case to the spreadsheet row.) I know it's a template language, not a programming language, but I figured I would start small. Basically Flow can be set to create a new row on a google spreadsheet if a trigger action takes place. The problem is, the premade templates for printing the message of the email are only shown for the related trigger action, meaning if I set the trigger to "Order Paid" I only see printable variables under the "order" object.
I want to get the SKU and line item qty, so I think I need to run a for loop to get the {{product.variant_sku}}
for all of the items in the cart / order. Here's what I'm putting into the API:
{% for product in cart.items %} {{ product.variant_sku }} {% endfor %}
Whenever I try to save this code to the workflow, I get an error stating "Your workflow can't be saved. Fix any errors and try again."
Am I missing a reference of some sort? I would think the API knows which page I'm referencing based on the trigger action. When I ran that code through the Liquid Sandbox from Jumpseller it did not return any errors. Am I just not providing it enough data? Or might my request be getting blocked for some reason? Any help is appreciated. Thanks.
****Edit: I've been messing around trying different troubleshooting methods, and stumbled onto something I probably should have mentioned: I'm using this in a test-account environment, so there is no live webpage that this app can refer to. I'm thinking this may actually be my issue, since even if I only work out of the drop-down menus, I cannot save the "Flow" if there is anything in the message related to Order (even the ID).
Shopify cart and order has line_item that is structured differently than products. This is what you need.
{% for item in cart.line_items %}
{{ item.sku }}
{% endfor %}
More details - https://shopify.dev/docs/themes/liquid/reference/objects/line_item#line_item-sku
Edit: The above doesn't work for Shopify Flow. Check below part
Shopify Flow reference for order and product variables are different compared to theme variables. Below should work
{% for item in order.lineItems %}
{{ item.sku }}
{% endfor %}
More details - https://help.shopify.com/en/manual/shopify-plus/flow/create-workflow/variables

Write custom search app in shopify

I need to implement our own custom product search in Shopify, but I have been unable to find out how exactly to do this.
I am not talking about the template which shows the search result, but we need to write custom code to decide exactly which products should be shown on the search page, and their order.
I can see there are a lot of apps out there which provides a custom search result/order so I guess it is possible to do, I was just unable to find any documentation about it.
I already have all the data needed to produce the desired search result, so my only problem is how to integrate with Shopify, so that Shopify send the search to our app, and then display the products our search app returns.
---- ADDED ----
What I would like in a perfect world, is that when the user does a search, Shopify should send the search phrase to our server. We would then generate an ordered list of product matches and return that list to shopify. Shopify would then present the products to the user, exactly as if the products were found by shopify using the internal shopify search engine.
But it seems like i might have misunderstood how that google search thing worked, and it seems like what I want is simply not possible.
To customize the search result in your shopify store you have to manipulate the search result provided by the search result. To do so you have to find in your theme where logic for search operation is written.
Mostly you will find it in search.liquid file. You need to filter the search result there. Suppose you want to restrict products of particular vendor in the search result then you can do it as follow.
{% for item in search.results %}
{% if item.vendor != 'Reebok' %}
{% include 'search-result' %}
{% endif %}
{% endfor %}
Here search-result will be the snippet responsible represent each search result in the search list. Simillarly you have to manipilate the search result pagination too.
You have two different resources to do this.. One talks about search filters and the other talks about customizing the search results
https://help.shopify.com/manual/sell-online/online-store/storefront-search
https://help.shopify.com/themes/customization/store/enable-autocomplete-for-search-boxes
The first links talk about how you can modify the search terms using a combination of parameters on search query.
The second talks about how to load search results on a page and call them to your frontend using AJAX and JS

How to add a metafield to a customer in Shopify

I'm creating a signup form on my Shopify store, for customers. I'm willing to have them enter their basic credentials (email) plus additional info. I'd like to have that additional info stored in the customer's metafields.
I've seen here: http://docs.shopify.com/manual/configuration/store-customization/capture-additional-information-in-the-account-registration-form I can ask customers for additional information in the form of notes, but found no path to insert metafields.
I think this is possible, but I don't know how I could do.
Could someone help me, please?
See here:
For the time being, you can only add these metafields and edit them using the Shopify API. Some time from now, we will make it possible for a shop owner to manage them from the admin interface.
As far as I am aware this is still the case, and you must use the API to create/access metafields. See the Shopify doco on Metafields here.
Alternatively, there are apps that can help with the process.
Since it isn't possible to create a new area in the admin to hold the user's information, so technically you can't add a metafield to a customer.
But you can add a new field on registration page as a customer note.
All additional collected information will be displayed on the customer account page.
Add following lines inside {% form 'create_customer' %} and {% endform %} to add your custom field. Replace the [Label] with your own unique label.
<label>The text shown as label in the form</label>
<input type="text" name="customer[note][Label]" placeholder="Placeholder text" />
The attribute name="customer[note][Label]" is essential here. With it, the information will be submitted as a customer note. Without it, nothing will be submitted.