We want to achieve Quick Buy Functionality in Big-commerce Store. This functionality, we want to achieve on the results of quick search.
Please find attached screenshot for the reference. Customer can quickly add to cart the products with quantity while quick search and finally can checkout from the quick search window itself.
Please refer attached screenshot.
Can anyone help, what changes need to be done in template files to achieve this functionality?
Quick Buy Functionality
BigCommerce Stencil
You can add items to the cart from any page in your store via the AJAX API seen here.
// add item to cart
utils.api.cart.itemAdd(productId, quantity, options, (err, response) => {
let options = {
template: 'cart/preview',
params: {
suggest: response.data.cart_item.id
},
config: {
cart: {
suggestions: {
limit: 4
}
}
}
};
}
BigCommerce Blueprint
In blueprint, it's even easier. Just hit this URL with the products ID.
http://www.STOREURL.com/cart.php?action=add&product_id=PRODUCTID
Or for products with variations.
http://www.STOREURL.com/cart.php?action=add&product_id=PRODUCTID&variation_id=VARIATIONID
Not sure how you'd get the variation IDs in the quicksearch tab, but this is a good start. Also, checkout the quicksearch.js file in the js directory.
Related
I'm currently working on a solution where I need to extend Product information with additional (custom) data. I chose to store it in metafields as they may be more complex than a simple custom field (limit to 250 chars) plus they need to be readonly for admin personell. I want to access these fields in the storefront template.
I see that there's a permission option for metafiels read_and_sf_access (setting storefront access for the metafield) but no info how that can be accessed.
On the other hand the product theme object does not have any attribute for metafields.
How can I access product metafields in a stencil template?
You can add the GraphQL query to fetch the metafields into the Front Matter at the top of the parent page template, for example product.html
And then from there, you can access it like any other handlebars property (under the gql top-level key) - so you may need to pass the result into your component for example.
Here's what that might look like in product.html:
---
product:
videos:
limit: {{theme_settings.productpage_videos_count}}
reviews:
limit: {{theme_settings.productpage_reviews_count}}
related_products:
limit: {{theme_settings.productpage_related_products_count}}
similar_by_views:
limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query productMetafieldsById($productId: Int!) {
site {
product(entityId: $productId) {
metafields(namespace: \"my-namespace\") {
edges {
node {
key
value
}
}
}
}
}
}
"
You would then access this via {{gql.data.site.product.metafields}}
An easy way to consume it would look like:
{{#each gql.data.site.product.metafields.edges}}
{{#with node}}
{{key}}
{{value}}
{{/with}}
{{/each}}
Metafields will only be available in the storefront if they have a permission_set containing storefront, otherwise they will be hidden from the storefront.
You can also invoke the GraphQL API directly from the Stencil frontend if you prefer, and you can test your queries using the "Storefront API Playground" under Advanced Settings in the control panel.
I've tried searching everywhere and looking at all the docs. There's nothing that shows how apps place an iframe inside the thank you page after the checkout.
How do other apps do this?
Order status page is known as Thank you page in Shopify. From Shopify Docs
Different fields appear on the order status page depending on whether
the status is confirmed, on its way, out for delivery, or delivered.
Generally, Shopify Apps add Script Tag via API to include their JavaScript on Shopify Store. The display_scope property can be order_status or all so that custom JavaScript also loads on Thank you page.
POST /admin/api/2020-07/script_tags.json
{
"script_tag": {
"event": "onload",
"src": "https://djavaskripped.org/fancy.js",
"display_scope": "order_status"
}
}
Once the JavaScript is loaded, the app may add iframe or anything that is needed. To extend the Order status page, Shopify also provides a JavaScript function named addContentBox.
Shopify.Checkout.OrderStatus.addContentBox(
"<h2>Pick-up in store</h2>",
"<p>We are open everyday from 9am to 5pm.</p>"
);
I'm building a Shopify app which offers additional products or services related to some identified products. In some cases, I end up adding a product to cart from cart page.
I found this question quite useful, to take actions on cart changes. The issue is that I'm currently forced to reload the page to re-render the cart along with the new product. I can't reasonably reconstruct the cart myself to include new items.
Hence, is there a way to trigger an "AJAX rendering" of the cart and avoid a full page reload ?
You can achieve this in many ways depending on your end goal. From your description, I have understood that you just want your script to run on Cart page. However, just note that a user may proceed to Checkout page without visiting Cart page. So just cover all your use cases.
This would have been much easier if you had to do this in theme and not in an app. Since, your app does not have any idea about the markup of Cart page, it is not easy to just append the new product row to existing table. As a workaround, on adding new product, call the cart page via Ajax, parse the returned HTML and replace the Cart form. So after adding new product, just call the below code to re render product form on Cart page.
function RerenderCart() {
$.get("/cart", function (data) {
const parser = new DOMParser();
const doc = parser.parseFromString(data, "text/html");
const formSelector = doc.querySelector("form[action='/cart']");
$("form[action='/cart']").replaceWith(formSelector);
});
}
Add checks for cart page and if form was found in returned HTML.
This code works fine on Debut Shopify theme. Just thoroughly test it on all your use cases.
DOMParser
Currently, I am working on a Shopify app and I need to retrieve all products (featured collections) that are shown on the home page.
I tried {{product}}, {{collection.products}}
I have checked the Shopify cheat sheet but I can't find anything useful.
I can access products on the collection page and the home page using Shopify liquid.
Now I want to access products on the index page using Shopify liquid.
Please help me
Thank you
The solution to the above problem
I have used jquery to find the product handles using script tags, After finding the handle of all products that are displayed on the index (home) page.
I run the following ajax to get product details using product handle.
jQuery.ajax({
url: "/products/product-handle.js",
dataType: 'json',
async: false,
success: function(p) {
//after function success the data of every product is stored in p variable
}
})
Now I am able to do other calculations with product data.
I am a beginner developer and I recenty started taking on clients. One asked me to integrate their current website that i created with the hubspot page tracker.
i have checked on their developer page, and it doesnt give specific instructions for gridsome rather SPA's as a whole.
I dont know where to embed the code provided.
https://developers.hubspot.com/docs/api-/events/tracking-code
My applicaiton is an SPA and i am using gridsome.
my project can be found at https://github.com/chs242/ezras-nashim
i am so lost. If someone can take the time to help a little i'd be super grateful
regards
To embed the code, add the HubSpot script (replace the xxxxxxx with your HubId) in src/main.js:
export default function (Vue, { router, head, isClient }) {
Vue.component('Layout', DefaultLayout)
head.script.push({
src: 'https://js.hs-scripts.com/xxxxxxx.js',
body: true
})
}