How to properly setup Snipcart inside custom components

Question

I got a custom component which is actually an ajax search form. Someone select some options and when he hit submit button i want to load some products based on the selected criteria.

I includes the js / css snipcart files needed inside my template's index.php file and when I use the JS validation on snipcart's dashboard it says everything is ok.

Reading the Snipcart's Doc i have to add the data-item-url for each product.

I started by setting : data-item-url="http://mydomain.com/components/com_rouf/scripts/ajaxProducts.php" ( this was the file that was performing the ajax call and printing the products )

When I tried to buy a product, on checkout tab I get this error:

Item B1-TEST has not been found at http://mydomain.com/components/com_rouf/scripts/ajaxProducts.php.

Then i changed it to : data-item-url="http://mydomain.com/index.php?option=com_rouf" (the view file in which the html code was printed)

No result.

After that i moved the ajax file mechanism inside a new view file and instead of ajax call i used a form to send the search options.

tried both data-item-url="http://mydomain.com/index.php?option=com_rouf&view=rouf&layout=products.php"

AND

data-item-url="http://mydomain.com/components/com_rouf/views/rouf/tmpl/products.php"

Same Error.

After that i thought that for actually printing the html code of product so snipcart can crawl and find it in both the view and ajax file a $_POST is mandatory.

So i created a new file test.php printing ALL products.Ofc this is a retarded way and it is only for test purposes.

<?php
$db=JFactory::getDbo();
$query='SELECT * from `#__dash_sxoles_pricing` as a left join `#__dash_license_cat` as b on a.license_id=b.id left join `#__dash_sxoles` as c on a.sch_id = c.id  where 1';
$db->setQuery($query);
$res=$db->loadObjectList();

foreach ($res as $row ) {
    $diplCode=$row->code.'-'.$row->name;
    echo '

     <div>'.$row->company.'</div>
                <button type="button" class="snipcart-add-item"
             data-item-name="'.$diplCode.'"
             data-item-price="'.$row->price.'"
             data-item-id="'.$row->id.'-'.$row->license_id.'"
             data-item-url="http://mydomain.com/test.php">
              Add to cart
            </button>
               </div>
               ';
}
?>

Didnt work either. I allready sent an email @ snipcart but I didnt have a response.

Has anyone set snipcart before in Joomla! ? Am I completly missing something here or ?

Answer 1

Okay, I found the mistake. I needed to set the character encoding to UTF-8 at the external script, because the name values were getting converted to boxes and that caused value collisions.

I'll provide all of the steps that I did to achieve the final result.

• Added the Javascript / CSS includes in the Header of template's index file
• At snipcarts Dashboard I validate that the includes are okay
• At snipcarts Dashboard I set the domain in which I'm going to use snipcart (you can't use it on localhost)

Now for dynamic creation of products (show products based on some terms) there are 2 ways :

• Set data-item-url to an external script where you will print ALL products (LAME way)
• Set data-item-url to the same file, but attach $_SESSION vars, so that the products will get printed at the HTTP REQUEST snipcart will do when someone checkouts.

For External Script: You must set character encoding at UTF-8 <?php header("Content-Type: text/html; charset=utf-8"); ?> This will protect multibyte characters from being converted to boxes, and ensures that the item-name will be the same. I don't suggest this one because you have to NOT use defined( '_JEXEC' ) or die( 'Restricted access' ); on top of file, because snipcart http req will fail. So you will have a page with all your product's info open to everyone.

For Recalling the same file : The data-item-url should be something like that:

echo 'data-item-url="http://domain.com/index.php?option=com_rouf&view=rouf&layout=products&loc='.$_GET["loc"].'&lic='.$_GET["lic"].'">';

The only disadvantage is that I have to use $_GET instead $_POST, altough I don't pass any crucial data. (can't think of a way to achieve it with $_POST. If someone could suggest something it would be awesome)

I will post the php code I use for better explanation if someone struggle again in future:

<?php
 //select the products base on location and type of products
 $loc = $_GET['loc']; 
 $diploma = $_GET['lic']; 

 $query=$db->getQuery(true);
 $query->select('a.*')
       ->from($db->quoteName('#__dash_sxoles', 'a'))
       ->join('LEFT',$db->quoteName('#__dash_sxoles_pricing', 'b') . ' ON (' . $db->quoteName('a.id') . ' = ' .$db->qupteName('b.sch_id') .')')
       ->where('a.location='.$db->quote($loc))
       ->where('b.license_id'.$db->quote($diploma));
$db->setQuery($query);
$src=$db->loadObjectList();

//print the data with data-url of each product recalling the same view file with $_GET params

foreach ($src as $row) {
  echo '
  <div class="col-lg-3 ">
  <div class="st-inner ajaxcontainer" style="">
  <div>'.$row->company.'</div>
  <button type="button" class="snipcart-add-item"
  data-item-name="'.$diplCode.'"
  data-item-price="'.$row->price.'"
  data-item-id="'.$row->sch_id.'-'.$row->license_id.'"
  data-item-url="http://domain.com/index.php?option=com_rouf&view=rouf&layout=products&loc='.$_GET["loc"].'&lic='.$_GET["lic"].'">
    Add to cart
 </button>
 </div>
 </div>';
}

EDIT : I found a better way, using $_POST for form and $_GET just for the snipcart's request.

$loc = $_POST['loc'];
$diploma = $_POST['lic'];
if (isset($_GET['loc'], $_GET['lic'])) {
    $loc=$_GET['loc'];
    $diploma=$_GET['lic'];
    unset($_GET['loc']);
    unset($_GET['lic']);
}

Answer 2

The value in data-item-url must be a URL where the actual buy button will be found. When looking at the source of the page specified in the data-item-url attribute we must find the actual snipcart-add-item button for the specific product.

Looks like the solution you tried with the test.php file could work. So maybe it's a problem with the domains setup.

We have an article in our Knowledge base that can be interesting:

---

Invalid data-item-url

The most common reason is that the value specified in data-item-url is not valid.

Before completing the order, Snipcart makes a HTTP request to the value specified in this attribute to make sure the price and other important information have not been altered by someone who knows how to use browser developer tools.

You can read more about this in our documentation: http://docs.snipcart.com/getting-started/security

The specified URL must be an URL where the snipcart buy button for the product will be available on the source of the page.

Important notice: For users with a single-page website, the data-item-url field should be filled with only your basic domain name, such as www.example.com, or with a simple slash bar /.

Invalid domains setup

Also, you need to allow on which domain and sub domains your products are available. If you log into the dashboard and go to Settings > General you will be able to set your default domain name as well as the additional allowed domains and sub domains.

For example, if the data-item-url value is http://test.mysite.com/products/1 and your default domain is mysite.com it will fail. You will need to add test.mysite.com in the allowed sub domains.

If you want, you can also use relative URL (/products/1). But we will only validate the product in your default domain name. So in the example above, if the data-item-url value was /products/1 we would make the HTTP request to validate the information to http://mysite.com/products/1.

To specify a relative URL, the data-item-url value must starts with a /.