How to use jquery in ecshop

ECShop, as a domestic open source e-commerce platform, has always been supported and loved by small and medium-sized enterprises and individuals. As one of the most popular JavaScript frameworks, jQuery is also widely used in all aspects of web development.

This article aims to introduce how to use jQuery in ECShop to achieve some common front-end interactive effects. Specifically, we will cover the following content:

1. Introduction and installation of jQuery;
2. Introducing jQuery into ECShop;
3. Common jQuery application scenarios: Carousel images, drop-down menus, pop-up windows, etc.;
4. Application of jQuery in ECShop plug-in development.

1. Introduction and installation of jQuery

jQuery is a fast and concise JavaScript framework that allows developers to more conveniently operate HTML documents, process events, and implement animations Effects etc. It simplifies the way JavaScript is operated, allowing developers to complete front-end development work more efficiently.

Before we start using jQuery, we need to introduce it into our project. Specifically, we can achieve this in the following ways:

1. Introduced through CDN: Just add the following code in the head tag of the HTML page.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Download and import local files: We can download the corresponding version of jQuery file from the official website (https://jquery.com/), and then import it through the following methods.

<script src="js/jquery-3.6.0.min.js"></script>

3. Use npm to install: If your project uses npm as a package management tool, we can install jQuery through the following command.

npm install jquery

2. Introducing jQuery into ECShop

Introducing jQuery into ECShop is also very simple. We only need to add the following code to the template file.

<script src="__PUBLIC__/jquery/jquery-3.6.0.min.js"></script>

Among them, __PUBLIC__ is a system variable, indicating the project's public directory. We can place the jQuery file in this directory to facilitate the sharing of multiple template files.

3. Common jQuery application scenarios

1. Carousel chart

Carousel chart is a very common front-end interaction effect, which can make The page is more vivid and rich. In ECShop, we can use jQuery to achieve the effect of carousel images.

Specifically, we can implement the carousel chart through timers and dynamic modification of CSS properties. code show as below.

<!-- HTML代码 -->
<div class="carousel">
  <div class="carousel-item active"><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/1.jpg"  class="lazy" alt="How to use jquery in ecshop" ></div>
  <div class="carousel-item"><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/2.jpg"  class="lazy" alt="How to use jquery in ecshop" ></div>
  <div class="carousel-item"><img  src="/static/imghwm/default1.png"  data-src="__PUBLIC__/images/3.jpg"  class="lazy" alt="How to use jquery in ecshop" ></div>
</div>

<!-- CSS代码 -->
.carousel {
  position: relative;
  width: 100%;
  height: 400px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .5s ease;
}

.carousel-item.active {
  opacity: 1;
}

<!-- JavaScript代码 -->
<script>
  $(function() {
    var $items = $('.carousel-item');
    var len = $items.length;
    var index = 0;

    setInterval(function() {
      $items.removeClass('active');
      $($items[index]).addClass('active');
      index++;

      if (index === len) {
        index = 0;
      }
    }, 3000);
  });
</script>

2. Drop-down menu

The drop-down menu is also a very common interactive effect, which can make the page more concise, clear and easy to operate. In ECShop, we can use jQuery to quickly implement the drop-down menu effect.

Specifically, we can add a hover event to the menu element and then modify the CSS properties to achieve the effect of the drop-down menu. code show as below.

<!-- HTML代码 -->
<ul class="menu">
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>

<!-- CSS代码 -->
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  float: left;
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  color: #666;
  text-decoration: none;
}

.menu > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
}

.menu > li:hover > ul {
  display: block;
}

.menu > li > ul > li > a {
  display: block;
  padding: 10px;
  color: #666;
  text-decoration: none;
}

.menu > li > ul > li > a:hover {
  background-color: #f7f7f7;
}

3. Pop-up window

Pop-up window is also a common front-end interaction effect, which can make the page more flexible and easier for users to operate. In ECShop, we can use jQuery to achieve the pop-up effect.

Specifically, we can add a mask layer and a pop-up element, and then dynamically modify the CSS properties to achieve the pop-up effect. code show as below.

<!-- HTML代码 -->
<div class="modal">
  <div class="modal-overlay"></div>
  <div class="modal-dialog">
    <div class="modal-header">提示</div>
    <div class="modal-body">你确定要删除吗？</div>
    <div class="modal-footer">
      <button class="btn btn-ok">确定</button>
      <button class="btn btn-cancel">取消</button>
    </div>
  </div>
</div>

<!-- CSS代码 -->
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  background-color: #000;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.modal-header {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.modal-body {
  padding: 10px;
  font-size: 14px;
}

.modal-footer {
  padding: 10px;
  text-align: right;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-ok {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-ok:hover {
  background-color: #449d44;
}

.btn-cancel {
  margin-left: 10px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-cancel:hover {
  background-color: #e6e6e6;
}

<!-- JavaScript代码 -->
<script>
  $(function() {
    $('.btn-delete').click(function() {
      $('.modal').fadeIn();
    });

    $('.btn-ok, .btn-cancel').click(function() {
      $('.modal').fadeOut();
    });
  });
</script>

4. The application of jQuery in ECShop plug-in development

As an open source e-commerce platform, ECShop also supports the development of plug-ins to meet users’ personalized needs for functions. In plug-in development, we can also use jQuery to achieve some interactive effects.

Specifically, we can introduce jQuery into the plug-in template file, and then use the various APIs it provides to achieve various interactive effects. For example, to implement a plug-in for customizing the order page in ECShop, we can use the following code to modify the quantity of products on the page.

<!-- HTML代码 -->
<input type="text" name="goods_num" value="1" data-max="100" class="form-control" />

<!-- JavaScript代码 -->
<script>
  $(function() {
    $('input[name=goods_num]').change(function() {
      var max = $(this).data('max');
      var num = parseInt($(this).val());

      if (num > max) {
        num = max;
      }

      if (num < 1) {
        num = 1;
      }

      $(this).val(num);
    });
  });
</script>

The above code will automatically determine and limit the quantity between 1 and the maximum when the quantity of the product changes.

Summary

In this article, we introduced how to use jQuery in ECShop to achieve common front-end interactive effects. Specifically, we explained the introduction and usage of jQuery, the introduction of jQuery into ECShop, common application scenarios such as carousels, drop-down menus, and pop-up windows, as well as the application of jQuery in ECShop plug-in development.

I believe that through studying this article, everyone will have a deeper understanding of how to use jQuery to achieve front-end interactive effects. In the actual development process, we can choose the appropriate technology stack to achieve various interactive effects based on specific needs to improve the user's interactive experience.

The above is the detailed content of How to use jquery in ecshop. For more information, please follow other related articles on the PHP Chinese website!