Is there a safe way to alter the Shipping and Billing Country and State select dropdowns in checkout? It would be nice if this were a setting a seller could control in the admin panel, but I don't believe it is available.
Here is an example of how I have handled this in the past, but I would like to avoid writing JavaScript to manipulate the DOM and override the default functionality on page load as I'm aware this is not best practice and likely not supported by all browsers...
EDIT: I saw this PR come in yesterday, but I don't think we can edit the actual {{{ checkout.checkout_content }}}.
https://github.com/bigcommerce/stencil/pull/940
if(window.location.pathname == "/checkout.php"){
console.log("loaded from analytics box");
function handleUSOnlyBillingCountry(){
$('#FormField_11 option[value="United States"]').addClass("keep-me");
$('#FormField_11 option[value="Canada"]').addClass("keep-me");
$('#FormField_11 option[value="Puerto Rico"]').addClass("keep-me");
$('#FormField_11 option:first-child').addClass("keep-me");
$('#FormField_11 option').each(function(){
if(!$(this).hasClass("keep-me")){
$(this).remove();
}
});
}
}
I checked the shipping configuration on the store, and confirmed only United States is available for shipping, but all countries still show in checkout. Once an address outside of the configured shipping zone is entered, it says "One of more of the items in your cart cannot be shipped to your location". This helps, but I would like to remove the options completely.
We've definitely had this request in the past, but there isn't a current stencil alternative from javascript. If you use Optimized Checkout, the country dropdown is automatically limited to the countries you ship to.
In developer or blueprint checkout, the only currently viable solution (to my knowledge) is javascript. I don't believe we'll be adding this to legacy checkouts, but we are working on a future Checkout SDK which could be consumed and have (hopefully) fewer potential points of failure for this change.
I was under the impression that the list of shipping countries had to be configured thru the control panel thru the use of shipping zones. https://support.bigcommerce.com/articles/Public/Setting-Up-Shipping-Zones
Related
For our Spartacus project, we need to introduce additional Data properties in the checkout:
We have the case, that the user needs to select a delivery mode per product.
In an ideal world, upon selection, the selected delivery mode would be saved in the NGRX Store and also in the Backend to stay within the principle of the data binding defined here: https://sap.github.io/spartacus-docs/connecting-to-other-systems/#component-data-binding
Expected Data / User flow:
User goes to Checkout and to Delivery Mode Step
Custom OCC Call is made to load the supported delivery modes for each product (depends on product type and further customer specific logic)
The cart items are displayed, enhanced with a dropdown containing the available delivery modes
The user selects a delivery mode
The selected delivery mode is stored on the cart entry within the NGRX Store and saved in the backend
The new Cart totals is calculated based on the costs of the selected delivery mode
The new Cart totals is stored on the cart within the NGRX Store and saved in the backend
The user clicks on continue to get to the Review Order Step
The cart items are listed with the previously selected delivery mode
After some analysis of the existing code, we found a property deliveryMode on the orderEntry. This does not seem to be used anywhere in spartacus, but could be used to make Step 9 work by following this stackoverflow answer and this one.
Questions regarding this flow:
How can we extend the NGRX Store? We assume, it would be possible to just extend the facade (Active Cart Service), bypass the store and save the information in the backend (Described here) and afterwards refresh the store from the backend. Is that Assumption correct? If yes, that feels awkward though, as we need to reload the whole store just to contain the new property deliveryMode on the orderEntry
How can we hook into the price calculation of the cart totals to update the total based on the selected delivery mode? And again, how can we bring the new total sum into the store?
There seem to be several Answers within the Slack Channel without very few usable answers around extending the ngrx store, even though for us, it seems to be a quit normal task.. :-/
Any thoughts, inputs or support would be very appreciated. :-)
This seems like a difficult thing to accomplish seeing as delivery modes per product aren't supported as-is in spartacus. But some ideas:
You can extend core CartEntry classes (adapter, connecter, facade, etc.) to include the delivery mode for entries added to the cart. You will probably need to change all to include the delivery mode setting(s). All of these are exposed so you can modify them as needed including the store.
Utilizing multiple carts to have a product per cart and set delivery mode that way. But this would be cumbersome in my opinion.
As far as price calculation goes, I'm assuming OCC calls return total prices. Does the call for the cart entries include delivery mode costs per entry?
We have implemented the following work around and it works so far:
Enhance the Cart Model in the backend
Add new Endpoints to load the available delivery Modes per Product (by bypassing the NGRX Store)
Add new Endpoints to save the selected Delivery Mode (by bypassing the NGRX Store)
After Save Endpoint, a cart Reload is triggered, which loads the new cart totals having a custom property on the order entry (via type augmentation) into the store from the backend
It's already a lot of years past since Spartacus project started, but looks like it's still really raw projects. Spartacus is not ready to deal with real word customer's requirement and complexity of customize it quickly grow at real project(so you start to think do we really need it, as it's so unflexible at some dimentions). Some parts is really hard or not possible to customize, so you begin to search a workarounds(This question is one common case).
I think NGRX Store is one of the biggest pain in the ass to customize something at Spartacus. 2 years past and nothing changed by Spartacus team...
I am doing some work for a client who uses BigCommerce Stencil Theme and I am pretty new to BC. Until now most of my work with them has been basic theme formatting and styling.
They are asking if I can add checkboxes next to items in cart to indicate an alternative delivery system, and then add a field to address for a hotel room. It seems like built into BC checkout customization you can add fields to addresses so that doesn't seem like an issue, but I'm not so sure about the checkboxes. I would imagine I would need access to the underlying PHP to make this happen which doesn't seem possible. Is this accurate? If not, how might I go about doing this?
I see that I can add the checkboxes themselves to the template files, but as far as sending any data with the checkout I don't know how I'd go about doing this.
For the hotel room address field, you are correct that the simplest solution would be to use the built-in custom address field feature.
For the checkbox/alternate delivery system, we're close to releasing a new Checkout JS SDK that will give you the ability to create a completely custom checkout experience. The SDK is basically a Javascript wrapper for our Storefront Checkout API and it includes operations for checkout actions (like creating a new shipping consignment for an alternate delivery method).
The Checkout SDK doesn't give you access to the underlying PHP; instead, it allows you to create your own frontend using React or whatever framework you prefer. The logic for custom checkout steps would exist in your frontend, and you would send your data to the checkout via the BC Checkout API.
https://stencil.bigcommerce.com/docs/customizing-checkout
I've implemented subscriptions through ReCharge where users can select products and these are saved as line item properties for that product. This was the only solution I could think of with my limited time using Shopify.
Per this question, it seems like line item properties are read-only after checkout. If this is truly the case, is there any solution that enables having modifiable subscriptions where users can re-select products for that subscription product that I can implement?
I'm using Shipstation for the shipping piece if this matters at all.
How can I implement modifiable products (which are subscriptions) in Shopify?
You can't. Well, technically you can but it is not easily done. Since you indicated that you're looking for official answers, I've contacted Shopify via email for you and I've been discussed this with Brad Leclerc, where he said:
That is indeed the case with line item properties being read-only after checkout, so it would need to be reconstructed for the new order. There's no super quick/easy to do that without some custom development to automate the process. If you end up wanting to do that, I'm sure a developer from http://experts.shopify.com could set something like that up.
You have two choices, either hire someone from experts.shopify.com to help or build your own marketing script from scratch.
Proof of email: http://i.imgur.com/OeM5gSm.png
I'd do this with meta fields on the customer.
meta fields can be used on the subscription product template to make it sensitive to the state of the customer's subscription (new or existing)
Use a order web hook to detect when a new subscription product has been purchased and then update the customer meta fields (e.g. subscription level and start and end dates).
use a periodic task in your supporting private app to:
prompt user before subscription becomes due to update their payment details or cancel the subscription
create and bill new orders for each subscription period
I am not familiar with Shopify, nor Revcharge, but according to the references, couldn't you simply customize the product page in shopify?
https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/get-customization-information-for-products
According RevCharge, you should use a Shopify product template anyway..
http://recharge.helpscoutdocs.com/article/91-recharge-integration-guide
I'm planning a new Shopify project, and the site requires a different shipping cost depending on the postal area of a postcode (e.g. SE1, N7). The plan was to manually add different shipping options inside of Shopify, then AJAX GET /cart/shipping_rates.json, and manually filter to the correct shipping rate by matching the name to postal area.
But my question is -- is there any way to carry over this shipping method to the Checkout as a selected option, and hide the Shipping Method drop-down from the checkout to prevent them choosing a different the shipping cost?
... Or, ideally, is there a way for me to directly override shipping costs through the API?
I don't know of any onboard functionality, which can facilitate this.
But there is a quite hacky workaround, that I use to filter the shipping rates in the checkout page.
Through the "Additional Google Analytics Javascript" field you can sneak a JS on every page of the shop, including the checkout. Here you can basically manipulate the shipping rates as you like.
In your case, the code must be aware of the shipping_address zip code. You can try to set a cookie on the first checkout page and then read the same cookie on the second.
Unfortunately, this isn’t possible with Shopify’s existing checkout.
I am implementing Google analytics onto a ecommerce site. We are already tracking events like adding to cart, removing etc using the event tracking. I would like to know what is the ideal time to use the ecommerce tracking apis (addTrans & addItem). Here are my questions:
Should I call these functions for each product being added to cart?
Should I call these functions only when the payment is complete and them while displaying receipt screen?
What is the ideal way of implementation? please provide best practices if possible.
Thanks in advance
I would track few things,
1.How many got into payment form and failed to buy, which can indicate to you that something wrong with payments or page itself. Count number of visitors in checkout - number of orders.
2.How many users got into site and haven't added at least one product, which will indicate that something wrong with advertisement, landing page or website layout in general. Number of unique visitors - those who added at least one item.
Adding statistics for each product added to cart shows you what? If users buy certain product you can get that this product is most wanted but in cart means noting imho. As for your second question, i would implement my solutions written above.
I wonder if your customers should go to an externally hosted page to make a payment. If they do, then GA tracking will not show you the real source of your profitable traffic - it will show you the payment processor page as the source.
It is recommended, or at least suggested, that you place the eCommerce tracking that includes the _trackTrans call on the "Thank You" or "Confirmation" stage of your checkout process.
Also, it's worth noting that if the user refreshes that page that the tracking is on then the code will be fired again and you may see skewed figures in Google Analytics.
I was like you, I also implemented the event tracking first but I wanted to get a chance to implement the ecommerce tracking to get some $ data in there to browse. So, on the developers page. One of the examples is on the reciept page, but on my implementation that wasn't going to work since I am use a payment API. So, On my checkout page I setup the parent transaction. using :
_gaq.push(['_addTrans',
'1234', // transaction ID - required
'Acme Clothing', // affiliation or store name
'11.99', // total - required
'1.29', // tax
'5', // shipping
'San Jose', // city
'California', // state or province
'USA' // country
]);
Then when I am listing my items in the cart, I use PHP and a foreach to dump each item, sku, price per item and quantity into the parent level transaction like this :
_gaq.push(['_addItem',
'1234', // transaction ID - required
'DD44', // SKU/code - required
'T-Shirt', // product name
'Green Medium', // category or variation
'11.99', // unit price - required
'1' // quantity - required
]);
For the last step in the process, I send transaction data to my merchant processing (paypal) via the SOAP api and get numerous responses back. I do different stuff based on the response I get back. If there is no error from the JSON response I get an COMPLETED response, at that point is when I fire the :
_gaq.push(['_trackTrans']);
I'm not really sure if this is the true way to go about it, but it makes sense to me.