Implementing jcarousel feature for showcasing the newest products on OpenCart

Currently, I am delving into the world of Opencart and attempting to create my latest product display using jCarousel. The version of Opencart I am working with is 1.5.4.

Despite following the steps outlined in this tutorial , I have encountered difficulties.

I have been editing the latest.tpl file as instructed in the tutorial, but seem to be hitting a roadblock at step eight.

Upon refreshing the page in Firefox, no changes or error messages appear. Below is a snippet of my latest.tpl file:

<script type="text/javascript" src="catalog/view/javascript/jquery/jCarousel/js/jquery.jcarousel.min.js"></script>

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jCarousel/skins/tango/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
   jQuery('#latestcarousel').jcarouseljcarousel();
});

</script>

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div id="latestcarousel" class="box-product">
      <?php foreach ($products as $product) { ?>
      <div class="jCarousel-skin-tango">
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php } ?>
        <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['rating']) { ?>
        <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
        <?php } ?>
        <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
      </div>
      <?php } ?>  
    </div>
  </div>
</div>

Does anyone have any suggestions or solutions?

Answer №1

Here is my updated latest.tpl file with the necessary changes.

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jCarousel/skins/tango/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#latestcarousel').jcarousel({
scroll: 1,
visible: 3,
auto: 3,
rtl: true,
wrap: 'circular'
});
});

</script>

<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-product">
        <ul id="latestcarousel" class="jcarousel-skin-tango">
        <?php foreach ($products as $product) { ?>
        <li class="carousel-latest">
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
            <?php if ($product['price']) { ?>
            <div class="price">
                <?php if (!$product['special']) { ?>
            <?php echo $product['price']; ?>
            <?php } else { ?>
            <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
            <?php } ?>
         </div>
         <?php } ?>
        </li>
        <?php } ?>
        </ul>
    </div>
  </div>
</div>

I have successfully implemented these changes. Thank you for your assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Apply a unique CSS class to the first two elements, then skip the following two elements, and continue this pattern using ngFor in Angular and flex styling

Here is a code snippet that displays a list of products using *ngFor in Angular: <div class="container-products"> <div class="item-product" *ngFor="let product of ['product A', 'product B', 'prod ...

Generating an interactive table using JSON with Angular 5

Can a dynamic table with dynamic columns be created based on a JSON object using Angular 5? If yes, how? The API response includes the following JSON: { "ResponseStatus": true, "ResponseData": [ { "Parent": "Company 1", ...

Problems with Web Audio API Implementation - struggling to make it functional

As a newcomer to the Web Audio API and not well-versed in JavaScript, I am trying to implement a specific function on a website that involves Google's TTS API. This function requires the returned Base64 audio to pass through a reverb filter and then a ...

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

I'm facing a challenge that I need help with: My HTML/CSS layout currently looks like this: Screenshot of how my CSS/HTML appears on the screen upon page load: As I scroll down, I encounter a green element: While scrolling down -> Upon further s ...

Making adjustments to a JSON object before saving it to a file with Postman and Express

I have successfully created a POSTMAN call to a server that provides a JSON response containing a list of items as shown below:- { "count": 6909, "setIds": [ "1/7842/0889#001", "2/4259/0166#001", "ENT0730/0009", "9D ...

What is the best way to utilize useClient in the code of my Next.js project?

I've been attempting to execute the code attached below, but I keep encountering an error stating that a component being imported requires useState and should only be used in a Client Component. However, none of its parent components are marked with " ...

Is there a way to retrieve the original width and height of an image after using CSS3's `scale` property to resize it?

Is there a method to determine the original width and height of an image that has been scaled using CSS3's scale property? ...

Utilizing JQuery to send information to a web form and showcase the resulting page

Since I have a large amount of data to transfer, I decided to use the post method. In webform1.aspx, I utilized $.post("webform2.aspx",{data:message}) during the button click event. However, after posting the data, I am unable to view the rendered page in ...

Having trouble importing my function component into a router in reactjs. Need some guidance on how to properly set it up

I am working on a Slider component function called export default Slider. In my App.js file, I have the following code: function App() { return ( <Router> <Routes> <Route exact path='/' element={<Home />} /> ...

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

Mongodb processes timestamp data in a long format

I'm curious about how to work with timestamps in MongoDB using NumberLong in our database. Which JavaScript function should I use in the MongoDB shell for this purpose? For instance, how can I determine the millisecond time of the next day after a ce ...

Is there a way to store the outcome of an HTTP GET call in Angular 7 as a JSON file?

Hey there! I'm currently working on a web app that needs to make regular calls to a remote API. Since the response will always be consistent, I am planning to optimize the site's performance by storing the response data in a local JSON file. This ...

Refreshing JqGrid tables after making changes and saving a row

In my PHP file, I have 4 jqGrid tables where I pass a different JSON array for each table. The data displayed on the grids come from one table with various SQL conditions. I am using inline editing for all the grids. After editing and saving a row in tabl ...

methods for transferring javascript variables to modal

<div> <h5> <a href="<?php echo base_url(); ?>/vendor/home/projects" >Return to Projects</a> </h5> <div> <div class="container"> <div class="row"> ...

How to Resolve ENOENT ERROR When Using fs.unlink in an Express.js Simple Application?

Currently, I am developing a basic blog using express.js. For managing the posts, I have opted for Typicode/lowdb as my database. The posts are created, updated, and deleted based on unique IDs stored in a data.json file. Additionally, I utilize the slug d ...

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

When using the tabview component from PrimeNG, I am encountering an issue where I am unable to bind a header style class. Here is my static HTML code that works: <p-tabPanel header="Title" headerStyleClass="badge" formGroupName=&quo ...

Pass a JavaScript variable to a PHP script using AJAX when a button is clicked, with a dynamically set href attribute

This is the current situation: There is a checkbox on each row of a table that represents some information An initially disabled button becomes enabled when any checkbox is checked The button is enclosed by an <a></a> tag as shown: <a>&l ...

Encountering a 500 error in production when making a call to the Next.js API

I have a dedicated API folder within my next.js application to handle server-side endpoints: import { NextApiRequest, NextApiResponse } from 'next' import Cors from 'cors' // Setting up the CORS middleware const cors = Cors({ method ...

The AJAX request sends the <div> element instead of the <button> element

I'm puzzled as to why this ajax call is passing the div id instead of the button id that I intended. <?php while($info = mysqli_fetch_array($sql)) { echo "<tr> <th>" .$info[& ...

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...